<template>
  <d2-container :class="{'page-compact':crud.pageOptions.compact}">
    <d2-crud-x
      ref="d2Crud"
      v-bind="_crudProps"
      v-on="_crudListeners"
      @apiTest="testApi"
      @showResult="testResult">

      <div slot="header">
        <crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch">
          <template slot="suffix">
            <el-dropdown>
              <el-button type="warning" size="small">
                请选择环境<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in evn_list" :key="index" @click.native="handleitemClick(item)">{{item.env_name}}</el-dropdown-item>
<!--                <el-dropdown-item>线上环境</el-dropdown-item>-->
<!--                <el-dropdown-item>螺蛳粉</el-dropdown-item>-->
<!--                <el-dropdown-item>双皮奶</el-dropdown-item>-->
<!--                <el-dropdown-item>蚵仔煎</el-dropdown-item>-->
              </el-dropdown-menu>
            </el-dropdown>
            <el-tag style="margin-left:10px">{{select_env}}</el-tag>
          </template>

        </crud-search>
        <el-button-group>
          <el-button
            size="small"
            type="primary"
            @click="addRow"
          >
            <i class="el-icon-plus"/> 新增
          </el-button>
          <el-button size="small" type="danger" @click="batchDelete"
                     :disabled="!multipleSelection || multipleSelection.length===0">
            <i class="el-icon-delete"></i> 批量删除
          </el-button>
          <el-button size="small" type="success" @click="batchTest"
                     :disabled="!multipleSelection || multipleSelection.length===0">
            <i class="el-icon-delete"></i> 批量测试
          </el-button>
          <el-button
            size="small"
            type="warning"
            @click="onExport"
          ><i class="el-icon-download"/> 导出
          </el-button>
          <importExcel
            api="apitest/testApiInfo/"
          >导入
          </importExcel>
        </el-button-group>
        <crud-toolbar v-bind="_crudToolbarProps" v-on="_crudToolbarListeners"/>
      </div>
      <span slot="PaginationPrefixSlot" class="prefix">
                <el-button class="square" size="mini" title="批量删除" @click="batchDelete" icon="el-icon-delete"
                           :disabled="!multipleSelection || multipleSelection.length===0"/>
            </span>
    </d2-crud-x>

    <div>
      <el-drawer
        title="测试结果"
        :visible.sync="resultShow"
        direction="rtl"
        size="70%">
        <template slot="title">
          <div>
            当前接口
            <el-tag>{{ apiObject ? apiObject.name : '无' }}</el-tag>
          </div>
        </template>
        <div>
          <api-result :api-object=apiObject></api-result>
        </div>
      </el-drawer>
    </div>
  </d2-container>
</template>

<script>
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
import * as api from './api'
import { apiTest, BatchTest } from './api'
import ApiResult from '@/views/api_result'
import * as evn_api from '@/views/api_envinfo/api'
export default {
  name: 'api_testinfo',
  components: { ApiResult },
  mixins: [d2CrudPlus.crud],
  data () {
    return {
      resultShow: false,
      apiObject: '',
      evn_list: [],
      select_env: '没有选择环境',
      select_obj: undefined
    }
  },
  mounted () {
    this.evn_init()
  },
  methods: {
    evn_init () {
      evn_api.GetList().then((ret) => {
        console.log(ret)
        this.evn_list = ret.data.data
        console.log('mounted evn_api ---------------')
        for (let i = 0; i < this.evn_list.length; i++) {
          const env_item = this.evn_list[i]
          console.log(env_item)
          if (env_item.default === true) {
            this.select_env = env_item.env_name
            this.select_obj = env_item
          }
        }
      })
    },
    getCrudOptions () {
      return crudOptions(this)
    },
    handleitemClick (item) {
      this.select_env = item.env_name
      this.select_obj = item
    },
    pageRequest (query) {
      console.log(query)
      return api.GetList(query)
    },
    addRequest (row) {
      return api.AddObj(row)
    },
    updateRequest (row) {
      return api.UpdateObj(row)
    },
    delRequest (row) {
      return api.DelObj(row.id)
    },
    batchDelRequest (ids) {
      return api.BatchDel(ids)
    },
    /**
     * 批量测试
     */
    batchTest () {
      if (this.multipleSelection == null || this.multipleSelection.length === 0) {
        this.$message({
          message: '您还未选择数据',
          type: 'warning'
        })
        return
      }
      if (this.select_obj === undefined) {
        this.$message({
          type: 'error',
          message: '没有选择环境'
        })
        return
      }
      this.crud.loading = true
      const ids = []
      let rowKey = this.crud.options.rowKey
      if (this.isVxeTable()) {
        rowKey = this.crud.options.rowId
      }
      for (const row of this.multipleSelection) {
        ids.push(row[rowKey])
      }
      api.BatchTest(ids, this.select_obj).then((ret) => {
        this.$message({
          type: 'success',
          message: ret.msg
        })
      }).finally(() => {
        this.crud.loading = false
        this.doAfterRefresh()
      })
    },
    infoRequest (row) {
      return api.GetObj(row.id)
    },
    testApi ({ row }) {
      console.log('测试')
      console.log(this.select_obj)
      if (this.select_obj === undefined) {
        this.$message({
          type: 'error',
          message: '没有选择环境'
        })
        return
      }
      row.env = this.select_obj
      console.log(row)
      apiTest(row).then((rt) => {
        console.log(rt)
        this.$message.success(rt.data)
        this.doRefresh()
      })
    },
    testResult ({ row }) {
      this.resultShow = true
      console.log(row)
      this.apiObject = row
    },
    onExport () {
      const that = this
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        const query = that.getSearch().getForm()
        return api.exportData({ ...query })
      })
    }
  }
}
</script>
